<!DOCTYPE html>
<!--[if lte IE 9]><html class="lt-ie10 lt-ie9" xmlns="http://www.w3.org/1999/xhtml"> <![endif]-->
<!--[if gt IE 9]><!-->
<html>
<!--<![endif]-->

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>赛尔（赛er）——论坛详情</title>
  <meta name="keywords" content="赛尔（赛er）是一个面向全国各大高校大学生的一站式社区平台，集竞赛活动发布和讨论为一体，提供发布、查询、组队、经验分享等多元化服务。" />
  <meta name="description"
    content="平台聚合了国内各大高校的校内比赛以及国内外各领域最优质的赛事活动信息。赛事内容囊括创新创业、演讲辩论、财会金融、艺术设计、学科竞赛、公益志愿等众多领域。赛尔（赛er）致力于打造一个融合大学生学习、赛事、活动、保研、考研等为一体的成长交流空间。" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta http-equiv="Access-Control-Allow-Origin" content="*" />
  <meta name="renderer" content="webkit">

  <link rel="stylesheet" type="text/css" href="/static/css/top-4.9.6.2.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/comment.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/circle.detail-4.4.5.min.css">
  <link rel="stylesheet" type="text/css" href="/static/css/monokai_sublime.min.css">

  <script src="/static/js/jquery-1.10.2.min.js"></script>


  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script>
  <script src="/common/common.js"></script>

  <!-- 引入样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
  <script type="text/javascript" src="/static/layui/layui.js"></script>
  <style>
    .layui-container{
      border: 1px solid #ededed;
      border-radius: 4px;
      background: #fbfbfb;
      padding: 38px 39px;
      height: 100px;
      font-size: 20px;
      margin-bottom: 30px;
      margin-top:30px;
    }
    .my-reply {
      padding: 10px;
      background-color: #fafbfc;
    }

    .my-reply .header-img {
      display: inline-block;
      vertical-align: top;
    }

    .my-reply .reply-info {
      display: inline-block;
      margin-left: 5px;
      width: 90%;
    }

    @media screen and (max-width: 1200px) {
      .my-reply .reply-info {
        width: 80%;
      }
    }

    .my-reply .reply-info .reply-input {
      margin-top:5px;
      min-height: 20px;
      line-height: 22px;
      padding: 10px 10px;
      color: #ccc;
      background-color: #fff;
      border-radius: 5px;
    }

    .my-reply .reply-info .reply-input:empty:before {
      content: attr(placeholder);
    }

    .my-reply .reply-info .reply-input:focus:before {
      content: none;
    }

    .my-reply .reply-info .reply-input:focus {
      padding: 8px 8px;
      border: 2px solid skyblue;
      box-shadow: none;
      outline: none;
    }

    .my-reply .reply-btn-box {
      height: 25px;
      display: inline-block;
    }

    .my-reply .reply-btn-box .reply-btn {
      position: relative;
      float: right;
      margin-left: 15px;
    }

    .my-comment-reply {
      margin-left: 50px;
    }

    .my-comment-reply .reply-input {
      width: flex;
    }

    .author-title:not(:last-child) {
      border-bottom: 1px solid rgba(74, 136, 199, 0.3);
    }

    .reply-father {
      padding: 10px;
    }

    .reply-father .header-img {
      display: inline-block;
      vertical-align: top;
    }

    .reply-father .author-info {
      display: inline-block;
      margin-left: 5px;
      width: 60%;
      height: 40px;
      line-height: 20px;
    }

    .reply-father .author-info span {
      display: block;
      cursor: pointer;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

    .reply-father .author-info .author-name {
      color: #000;
      font-size: 18px;
      font-weight: bold;
    }

    .reply-father .author-info .author-time {
      font-size: 14px;
    }

    .reply-father .icon-btn {
      width: 30%;
      padding: 0 !important;
      float: right;
    }

    @media screen and (max-width: 1200px) {
      .reply-father .icon-btn {
        width: 20%;
        padding: 7px;
      }
    }

    .reply-father .icon-btn span {
      cursor: pointer;
    }

    .reply-father .icon-btn .iconfont {
      margin: 0 5px;
    }

    .reply-father .talk-box {
      margin: 0 50px;
    }

    .reply-father .talk-box p {
      margin: 0;
    }

    .reply-father .talk-box .reply {
      font-size: 16px;
      color: #000;
    }

    .reply-father .reply-box {
      margin: 10px 0 0 50px;
      background-color: #efefef;
    }
  </style>
</head>

<body>
  <div style="display:none;position:absolute;left:0;top:0;">
    <img src="/static/picture/wechat_share_icon.png" id="weChatShareIcon">
  </div>
  <!--body-wrap-->
  <div class="body-wrap">
    <div id="app" class="body-main main-wrap v-4-2">
      <ul class="layui-nav layui-bg-cyan" style="margin: 0 auto;padding:0 12%" lay-filter="">
        <li style="display: inline-block;line-height: 60px;vertical-align: middle;position: relative;"><a
            href="/index.html"><img style="height: 60px;margin-right:15px;" src="/static/images/logo.png"></a></li>
        <!-- 选中 加上 layui-this -->
        <li class="layui-nav-item"><a href="/index.html">首页</a></li>
        <li class="layui-nav-item"><a href="/competition/competition.html">竞赛</a></li>
        <li class="layui-nav-item"><a href="/activity/activity.html">活动</a></li>
        <li class="layui-nav-item layui-this"><a href="/ask/ask.html">论坛</a></li>
        <li class="layui-nav-item"><a href="/article/article.html">文章</a></li>
        <li class="layui-nav-item" v-if="user!=''&&user!=null&&user!=undefined">
          <a href="javascript:;">发布</a>
          <dl class="layui-nav-child">
            <!-- 二级菜单 -->
            <dd><a href="/competition/publish_competition.html">创建竞赛</a></dd>
            <dd><a href="/activity/publish_activity.html">发布活动</a></dd>
            <dd><a href="/ask/publish_ask.html">发起提问</a></dd>
            <dd><a href="/article/publish_article.html">发表文章</a></dd>
          </dl>
        </li>
        <template v-if="user!=''&&user!=null&&user!=undefined">
          <li class="layui-nav-item" style="float: right">
            <a href="javascript:;" style="padding: 0 20px 0 0px">
              <img :src="NGINX_SERVER+user.AVATAR" class="layui-nav-img">
              {{user.NAME}}
            </a>
            <dl class="layui-nav-child">
              <dd><a href="/user/my_home.html">我的主页</a></dd>
              <dd><a href="javascript:void(0);" style="color:red" onclick="logout()">退出登录</a></dd>
            </dl>
          </li>
          <li class="layui-nav-item" style="float: right;margin-right: 25px;">
            <a target="_blank" href="/user/my_msg.html" style="cursor: pointer;"><i
                class="layui-icon layui-icon-notice" style="font-size: 18px;"></i><span class="layui-badge"
                v-if="unreadCount>0">{{unreadCount}}</span></a>
          </li>
        </template>
        <template v-else>
          <li style="float:right" class="layui-nav-item"><a href="/login.html">登录</a></li>
          <li style="float:right" class="layui-nav-item"><a href="/reg.html">注册</a></li>
        </template>
      </ul>
      <template v-if="forum==null">
        <div class="layui-container">
          抱歉！该话题已被删除！
        </div>
      </template>
      <template v-else>

      <div class="sk-circle4-1-box common-box clearfix" >
        <!-- left sidebar end 文章内容及评论-->
        <div class="clearfix circle-homepage fl" style="margin-top:0!important;">
          <!--文章内容-->
          <div class="common-box738 circle-text-box">
            <h1 class="circle-homepage-tit" :title="forum.FORUM_TITLE">{{forum.FORUM_TITLE}}</h1>
            <ul class="circle-menu-list">
              <li class="circle-menu-item sk-btn" title="forum.LABEL_NAME">{{forum.LABEL_NAME}}</li>
            </ul>
            <div class="circle-menu-meta clearfix">
              <dl class="circle-menu-meta-list clearfix fl">
                <dt class="author-name fl" :title="forum.NAME">{{forum.NAME}}<span
                        class="divide">·</span>{{forum.SCHOOL}}</dt>
                <dd class="item time-item fl" style="line-height: 17px;">{{forum.CREATE_TIME}}</dd>
              </dl>
            </div>
            <hr class="h-line">
            <div class="sk-circle4-1-para-box">
              <div class="para clearfix" v-html="forum.FORUM_CONTENT">

              </div>

              <!--<div class="sk-circle-detail-handle-box">
                <a href="javascript:;" class="item praise " id="praiseAction" action-url="/digg/journal"
                  action-data='{"source_id":430037}'>
                  <span class="item-icon reward-after-icon">
                    <span class="item-txt" id="praiseTxt">赞</span>
                  </span>
                  <span class="item-count ">
                    <em class="item-num" id="praiseNum">18</em>
                  </span>
                </a>

                <a href="javascript:;" class="item reward js_pop_open" pop-target="rewardInfoPop">
                  <span class="item-icon reward-after-icon">
                    <span class="item-txt">打赏</span>
                  </span>
                  <span class="item-count hide">
                    <em class="item-num" id="rewardNum">0</em>
                  </span>
                </a>
              </div>-->
              <div class="sk-article-detail-handle-box">
                <div class="sk-article-share-wrap clearfix">
                  <button href="javascript:;" class="layui-btn layui-bg-orange" @click="follow()" v-if="!isFollow">收藏</button>
                  <button href="javascript:;" class="layui-btn layui-bg-red" @click="follow()" v-else>取消收藏</button>
                  <span class="js_num" style="">&nbsp;&nbsp;{{forum.FOLLOWS}}</span>
                </div>

              </div>
            </div>
          </div>

          <!--评论-->
          <div class="common-box738 dis-max-hot-box comment-list">
            <div class="title-box">
              <h3 class="title">全部评论</h3>
            </div>
            <div class="common-box738 dis-max-hot-box comment-list">

              <div id="app1">
                <div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply">
                  <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                  <div class="reply-btn-box" v-show="btnShow">
                    <el-button class="reply-btn" size="small" @click="sendComment" type="primary">
                      发表评论
                    </el-button>
                  </div>
                  <div class="reply-info">
                    <div tabindex="0" contenteditable="true" id="replyInput" spellcheck="false" placeholder="输入评论..."
                         class="reply-input" @focus="showReplyBtn" @input="onDivInput($event)"></div>
                  </div>

                </div>
                <div v-for="(item, i) in comments" :key="i" class="author-title reply-father">
                  <el-card>
                    <el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar>
                    <div class="author-info">
                      <span class="author-name" @click="jumpUserHome(item.userId)">{{ item.name }}<p style="margin-left: 10px;" class="layui-badge" v-if="item.top==99">置顶</p></span>
                      <span class="author-time">{{ item.time }}</span>
                    </div>
                    <div class="icon-btn">
                      <span @click="showReplyInput(i, '-1',item.name, item.id)">
                        <i class="iconfont el-icon-s-comment"></i>
                      </span>
                      <!-- <span  @click="addlikeNumber(i, item.from, item.id)">
                    <i class="iconfont el-icon-caret-top"></i>
                    {{ item.like }}
                    </span> -->
                      <span class="xin" @click="countlikeNumber('1',i,item.id)">
                        <i class="iconfont el-icon-caret-top " v-if="item.isLike">&#xe607;</i>
                        <i class="iconfont el-icon-caret-top" v-else>&#xe68b;</i>
                        {{ item.like }}
                      </span>
                      <span v-if="item.userId==user.USER_ID" class="xin" @click="deleteComment(item.id,item.topicId)" >
                        <i class="layui-icon layui-icon-delete" style="color: red"></i>
                      </span>
                    </div>
                    <div class="talk-box">
                      <p>
                        <span class="reply">{{ item.comment }}</span>
                      </p>
                    </div>
                    <div class="reply-box">
                      <div v-for="(reply, j) in item.reply" :key="j" class="author-title">
                        <el-card>
                          <el-avatar style="vertical-align: top;" :size="40" :src="reply.fromHeadImg" :alt="reply.FROM_USER">{{reply.FROM_USER}}
                          </el-avatar>
                          <div class="author-info">
                            <span class="author-name" @click="jumpUserHome(reply.fromId)">{{ reply.from }}</span>
                            <span class="author-time">{{ reply.time }}</span>
                          </div>
                          <div class="icon-btn">
                            <span @click="showReplyInput(i,j, reply.from, reply.id)">
                              <i class="iconfont el-icon-s-comment"></i>
                            </span>
                            <span v-if="reply.fromId==user.USER_ID" class="xin" @click="deleteReply(reply.id)" >
                              <i class="layui-icon layui-icon-delete" style="color: red"></i>
                            </span>
                            <!-- <span @click="countlikeNumber('2',i,j,reply)">
                          <i class="iconfont el-icon-caret-top"></i>
                          {{ reply.like }}
                        </span> -->
                          </div>
                          <div class="talk-box">
                            <p>
                              <span>回复 {{ reply.to }}:</span>
                              <span class="reply">{{ reply.comment }}</span>
                            </p>
                          </div>
                          <div class="reply-box"></div>
                        </el-card>
                      </div>
                    </div>
                    <div v-show="_inputShow(i)" class="my-reply my-comment-reply">
                      <el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar>
                      <div class="reply-btn-box">
                        <el-button class="reply-btn" size="small" @click="sendCommentReply(i)" type="primary">
                          发表回复
                        </el-button>
                      </div>
                      <div class="reply-info">
                        <div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..."
                             @input="onDivInput($event)" class="reply-input reply-comment-input"></div>
                      </div>

                    </div>
                  </el-card>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- right info 学校信息与最新发表-->
        <div class="sidebar-b fr" style="margin-top:0!important;">
          <!--学校信息-->
          <div class="sidebar-b-con m-20">
            <div class="avatar">
              <a target="_blank" :href="'/user/my_home.html?id='+forum.USER_ID" class="avatar-link" :title="forum.NAME"><img :src="NGINX_SERVER + forum.AVATAR"
                                                                         alt="社区"></a>
              <a target="_blank" :href="'/user/my_home.html?id='+forum.USER_ID">
                <p class="avatar-name" :title="forum.NAME">{{forum.NAME}}</p>
              </a>
             <!-- <p class="avatar-scholl" :title="forum.LABEL_NAME">{{forum.LABEL_NAME}}</p>-->
            </div>

          </div>
          <!--最新发表-->
          <div class="sidebar-b-con" v-if="newPublishList.length>0">
            <div class="title-box">
              <h3 class="title">最新发表</h3>
            </div>
            <div class="new-active-box">
              <div class="new-active-list" v-for="(article, i) in newPublishList" :key="i">
                <a :href="'article_detail.html?id=' + article.ARTICLEMANAGEMENT_ID" :title="article.ARTICLE_TITLE"
                  class="new-active-item clearfix">
                  <div class="active-img-box fl">
                    <img :src="NGINX_SERVER + article.IMG_URL" :lt="article.ARTICLE_TITLE">
                  </div>
                  <div class="acitve-detail-box fr">
                    <h3 class="tit">
                      <div class="link">{{article.ARTICLE_TITLE}}</div>
                    </h3>
                    <div class="active-data-box clearfix">
                      <span class="active-data-con fl"><i
                          class="common-icon-big active-col-icon"></i>{{article.FOLLOWS}}</span>
                      <span class="active-data-con fr"><i
                          class="common-icon-big active-scan-icon"></i>{{article.VIEWS}}</span>
                    </div>
                  </div>
                </a>
              </div>
            </div>
          </div>
        </div>
      </div>
      </template>
    </div>

    <div class="footer-wrap v-4-2">
      <div class="footer other">
        <div class="common-box footer-box">
          <div class="to-top-box" id="toUpBox">
            <!--<a href="javascript:;" target="_blank" class="common-icon-big to-feedback-btn" title="意见反馈"></a>-->
            </a>
            <div class="iradio-2 to-msite-btn to-msite-btn-2" title="微信公众号">
            <span class="weixin-box" style="margin-top: -42px;">
              <img src="/static/images/erweima.jpg" alt="微信公众号">
              <span class="weixin-txt">关注赛er订阅号</span>
              <img src="/static/images/kefu.jpg" alt="微信客服">
              <span class="weixin-txt">添加赛er客服</span>
              <span class="arrow arrow-right boxL-cor" style="margin-top: -70px;"></span>
            </span>
            </div>
            <a href="javascript:;" class="to-top-btn common-icon-big" id="toUp" title="返回顶部"></a>
          </div>
          <div class="fl ft-info-box">
            <div class="ft-tit" title="关于赛er">关于赛er</div>
            <ul class="ft-list">
              <li class="item">
                <a href="" title="了解赛er" target="_blank" rel="nofollow">了解赛er</a>
              </li>
              <li class="item">
                <a href="./contact.html" title="服务协议" target="_blank" rel="nofollow">服务协议</a>
              </li>
              <li class="item">
                <a href="" title="合作伙伴" target="_blank" rel="nofollow">合作伙伴</a>
              </li>
              <li class="item">
                <a href="" title="加入我们" target="_blank" rel="nofollow">加入我们</a>
              </li>
              <li class="item">
                <a href="" title="隐私协议" target="_blank" rel="nofollow">隐私协议</a>
              </li>
            </ul>
          </div>
          <div class="fl ft-info-box">
            <div class="ft-tit" title="帮助中心">帮助中心</div>
            <ul class="ft-list">
              <li class="item">
                <a href="" title="常见问题" target="_blank" rel="nofollow">常见问题</a>
              </li>
              <li class="item">
                <a href="./legal.html" title="社区规范" target="_blank" rel="nofollow">社区规范</a>
              </li>
              <li class="item">
                <a href="" title="意见反馈" target="_blank" rel="nofollow">意见反馈</a>
              </li>
            </ul>
          </div>
          <div class="fr ft-info-box" style="width: 200px;">
            <div class="ft-tit" title="在线客服">联系我们</div>
            <ul class="ft-list">
              <li class="item">
                赛er<span class="item-dot"></span>客服QQ：<a href="https://wpa.qq.com/msgrd?v=3&uin=412414867&site=qq&menu=yes">412414867</a>
              </li>
              <li class="item">
                赛er<span class="item-dot"></span>官方QQ群：320513949
              </li>
            </ul>
          </div>

        </div>
      </div>
      <!-- 备案 footer -->
      <div class="ft-btm">
        <div class="common-box ft-btm-box">
          <div class="btn-con">
            <span class="ft-paragraph">©<span id="nowYear"></span>赛er<span class="s-4"></span></span>
            <span><a href="https://beian.miit.gov.cn/" target="_blank" style="color: #555;">苏ICP备2021019825号</a></span>
          </div>
        </div>
      </div>
    </div>
  </div>


<script>
  toTopFun();
</script>
</body>
<script src="/static/js/highlight.pack.js"></script>
<!--vue-->
<script>
  const clickoutside = {
    // 初始化指令
    bind(el, binding, vnode) {
      function documentHandler(e) {
        // 这里判断点击的元素是否是本身，是本身，则返回
        if (el.contains(e.target)) {
          return false
        }
        // 判断指令中是否绑定了函数
        if (binding.expression) {
          // 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法
          binding.value(e)
        }
      }
      // 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听
      el.vueClickOutside = documentHandler
      document.addEventListener('click', documentHandler)
    },
    update() { },
    unbind(el, binding) {
      // 解除事件监听
      document.removeEventListener('click', el.vueClickOutside)
      delete el.vueClickOutside
    },
  }
  const app = new Vue({
    el: "#app",
    data: {
      user: '',
      forum: {},
      NGINX_SERVER: NGINX_SERVER,
      pageNum: "1",
      pageSize: "10",
      commentParam: { "pageNum": "1", "pageSize": "10", "topicId": "", "sort": "desc" },
      btnShow: false,
      index: '0',
      replyComment: '',
      subIndex: '0',
      myName: '',
      myHeader:'',
      myId: 19870621,
      to: '',
      toId: -1,
      comments: [

      ],
      commentList: [

      ],
      unreadCount: 0,
      isP: false,
      isFollow: false,
      newPublishList: [],
      pd: false,
      fd: false
    },
    methods: {
      deleteComment(id,topicId){
        swal({
          title: "您确定要删除该评论吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "删除",
          closeOnConfirm: false
        }, function() {
          getDataByPost('api/comment/deleteComment', {
            COMMENT_ID: id,
            TOPIC_ID:topicId
          }, res => {
            if (res.code == 200) {
              swal("删除成功！", "您已经永久删除了这条评论。", "success");
              app.getCommentList();
            } else {
              toastr.error(res.msg)
            }
          })
        })
      },
      deleteReply(id){
        swal({
          title: "您确定要删除该回复吗",
          text: "删除后将无法恢复，请谨慎操作！",
          type: "warning",
          showCancelButton: true,
          confirmButtonColor: "#DD6B55",
          confirmButtonText: "删除",
          closeOnConfirm: false
        }, function() {
          getDataByPost('api/comment/deleteReply', {
            REPLY_ID: id
          }, res => {
            if (res.code == 200) {
              swal("删除成功！", "您已经永久删除了这条回复。", "success");
              app.getCommentList();
            } else {
              toastr.error(res.msg)
            }
          })
        })
      },
      jumpUserHome(id){
        window.open("/user/my_home.html?id="+id);
      },
      //收藏/关注
      follow() {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        let _this = this;
        let id = { "FORUM_ID": getUrlParam("id") };
        let params = {
          "TOPIC_TYPE": "论坛",
          "TOPIC_ID": getUrlParam("id")
        }
        //alert(id);
        if (!this.isFollow) {
          this.fd = true;
          getDataByPost("api/base/follow", params, function (res) {
            if (res.msg.indexOf("您已") != -1) {
              _this.isFollow = true
              _this.$forceUpdate()
              return
            }
            toastr.success("收藏成功")
            _this.forum.FOLLOWS += 1
            _this.$forceUpdate()
            _this.isFollow = true
            _this.fd = false
          })
        } else {
          this.fd = true;
          getDataByPost("api/base/unfollow", params, function (res) {
            toastr.success("取消收藏成功")
            _this.forum.FOLLOWS -= 1
            _this.$forceUpdate()
            _this.isFollow = false
            _this.fd = false
          })
        }

      },
      //获取论坛
      getForum() {
        let _this = this;
        let id = { "FORUM_ID": getUrlParam("id") };
        //alert(id);
        getDataByPost("api/forum/detail", id, function (res) {
          _this.forum = res.data;
          _this.isFollow = _this.forum.IS_FOLLOW
          //_this.isP = _this.forum.IS_PRAISE
          //console.log(_this.forum.newPublish)
          _this.newPublishList = _this.forum.newPublish

        })
      },
      getCommentList() {
        let _this = this;
        this.commentParam["topicId"] = getUrlParam("id");
        // this.commentParam["topicId"] = "1132021b77f5497193ac0a333b14d6e0";
        getDataByPost("api/comment/getCommentList", _this.commentParam, function (res) {
          _this.commentList = res.data.list;
          _this.convert();
          _this.$forceUpdate();

        })
      },
      inputFocus() {
        var replyInput = document.getElementById('replyInput')
        replyInput.style.padding = '8px 8px'
        replyInput.style.border = '2px solid skyblue'
        replyInput.focus()
      },
      showReplyBtn() {
        this.btnShow = true
      },
      hideReplyBtn() {
        this.btnShow = false
        replyInput.style.padding = '10px'
        replyInput.style.border = 'none'
      },
      showReplyInput(i, j, name, id) {
        this.comments[this.index].inputShow = false
        this.index = i
        this.comments[i].inputShow = true
        this.to = name
        this.toId = id
        this.subIndex = j == '-1' ? '-1' : j
      },
      addlikeNumber(i, id) {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        let list = this.comments[i].likeListId
        // console.log(i, name, id)
        if (list.length === 0) {
          //在已经点赞的列表中未找到userId
          this.comments[i].isLike = true
          this.comments[i].like += 1
          this.comments[i].likeListId.push(id)
          console.log("点赞+1", this.comments[i].isLike, this.comments[i].like, this.comments[i].likeListId)
        }
        else {
          const index = list.indexOf(this.myId)
          this.comments[i].isLike = false
          this.comments[i].like -= 1
          this.comments[i].likeListId.splice(index, 1)
          console.log("点赞-1", this.comments[i].isLike, this.comments[i].likeListId)
        }

      },
      countlikeNumber(type, i, j, id) {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        const text = type === '1' ? this.comments[i] : this.comments[i].reply[j]
        let list = text.likeListId
        if (list.length === 0 && this.comments[i].isLike == false) {
          //在已经点赞的列表中未找到userId
          text.isLike = true
          text.like += 1
          text.likeListId.push(id)
          console.log("点赞+1", text.isLike, text.like, text.likeListId)

          this.praise(1, this.comments[i].id)
        }
        else {
          const index = list.indexOf(this.myId)
          text.isLike = false
          text.like -= 1
          text.likeListId.splice(index, 1)
          console.log("点赞-1", text.isLike, text.likeListId)
          this.praise(0, this.comments[i].id)
        }

      },
      _inputShow(i) {
        return this.comments[i].inputShow
      },
      sendComment() {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        if (!this.replyComment) {
          toastr.error("评论不能为空")

        } else {
          let a = {}
          let input = document.getElementById('replyInput')
          let timeNow = new Date().getTime()
          let time = this.dateStr(timeNow)
          a.name = this.myName
          a.comment = this.replyComment
          a.headImg = this.myHeader
          a.time = time
          a.commentNum = 0
          a.like = 0
          a.id = this.myId
          a.reply = [],
            a.isLike = false,
            a.likeListId = [],
            this.comments.push(a)
          this.replyComment = ''
          input.innerHTML = ''
          let c = {
            "TOPIC_ID": this.forum.FORUM_ID,
            "TOPIC_TYPE": "论坛",
            "CONTENT": a.comment,
            "USER_ID": this.forum.USER_ID
          }
          let _this = this;
          getDataByPost("api/comment/addComment", c, function (res) {
            toastr.success("评论成功")
            _this.getCommentList()
            _this.convert()
            _this.$forceUpdate()

          })
        }
      },
      sendCommentReply(i) {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        if (!this.replyComment) {
          toastr.error("回复不能为空")

        } else {
          let a = {}
          let timeNow = new Date().getTime()
          let time = this.dateStr(timeNow)
          a.from = this.myName
          a.to = this.to
          a.fromHeadImg = this.myHeader
          a.comment = this.replyComment
          a.time = time
          a.commentNum = 0
          a.like = 0
          a.isLike = false
          a.likeListId = []
          console.log(" this.comments[i].reply+++++++++++", this.comments[i].reply, this.subIndex)
          if (this.subIndex === '-1') {
            this.comments[i].commentNum += 1
            this.reply(this.comments[i].id, this.replyComment, this.comments[i].userId)
          } else {
            this.comments[i].reply[this.subIndex].commentNum += 1
            this.reply(this.comments[i].id, this.replyComment, this.comments[i].reply[this.subIndex].fromId)
          }
          this.comments[i].reply.push(a)
          this.replyComment = ''
          document.getElementsByClassName('reply-comment-input')[i].innerHTML =
            ''
        }
      },
      onDivInput: function (e) {
        this.replyComment = e.target.innerHTML
      },
      dateStr(date) {
        //获取js 时间戳
        var time = new Date().getTime()
        //去掉 js 时间戳后三位，与php 时间戳保持一致
        time = parseInt((time - date) / 1000)
        //存储转换值
        var s
        if (time < 60 * 10) {
          //十分钟内
          return '刚刚'
        } else if (time < 60 * 60 && time >= 60 * 10) {
          //超过十分钟少于1小时
          s = Math.floor(time / 60)
          return s + '分钟前'
        } else if (time < 60 * 60 * 24 && time >= 60 * 60) {
          //超过1小时少于24小时
          s = Math.floor(time / 60 / 60)
          return s + '小时前'
        } else if (time < 60 * 60 * 24 * 30 && time >= 60 * 60 * 24) {
          //超过1天少于30天内
          s = Math.floor(time / 60 / 60 / 24)
          return s + '天前'
        } else {
          //超过30天ddd
          var date = new Date(parseInt(date))
          return (
            date.getFullYear() +
            '/' +
            (date.getMonth() + 1) +
            '/' +
            date.getDate()
          )
        }
      },
      convert() {
        console.log(this.commentList);
        this.comments = [];
        for (let i = 0; i < this.commentList.length; i++) {
          let comment = this.commentList[i];
          let replyList = this.commentList[i].REPLY_LIST;
          let c = {
            name: comment.NAME,
            id: comment.COMMENT_ID,
            userId: comment.USER_ID,
            headImg:
              this.NGINX_SERVER + comment.AVATAR,
            comment: comment.CONTENT,
            time: comment.UPDATE_TIME,
            commentNum: 2,
            topicId:comment.TOPIC_ID,
            top:comment.IS_UP,
            like: comment.PRAISES,
            isLike: comment.MY_PRAISE == 1 ? true : false,
            likeListId: [],//存放已点赞用户的id
            inputShow: false,
            reply: []
          }
          for (let j = 0; j < replyList.length; j++) {
            let rp = replyList[j];
            let r = {
              id: rp.REPLY_ID,
              from: rp.FROM_USER,
              fromId: rp.USER_ID,
              fromHeadImg: this.NGINX_SERVER + rp.AVATAR,
              to: rp.TO_USER,
              toId: 19870621,
              comment: rp.CONTENT,
              time: rp.UPDATE_TIME,
              commentNum: 1,
              like: 15,
              isLike: false,
              likeListId: [],
              inputShow: false,
            }
            c.reply.push(r);
          }
          console.log(c);
          this.comments.push(c);
        }
      },
      praise(s, cid) {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        let _this = this;

        if (s == 1) {
          let id = { "COMMENT_ID": cid };
          getDataByPost("api/comment/praiseComment", id, function (res) {
          })
        } else {
          let id = { "COMMENT_ID": cid };
          getDataByPost("api/comment/unpraiseComment", id, function (res) {
          })
        }
      },
      reply(cid, content, to_id) {
        if (this.user==null||this.user==undefined||this.user=="") {
          // toastr.error("未登录 无法使用此功能")
          swal ( "温馨提示" ,  "请先登录！" ,  "warning" )
          return
        }
        let _this = this
        params = {
          "COMMENT_ID": cid,
          "CONTENT": content,
          "TO_UID": to_id,
          "TOPIC_TYPE": "论坛",
          "TOPIC_ID": this.forum.FORUM_ID
        }
        getDataByPost("api/comment/replyComment", params, function (res) {
          toastr.success("回复成功")
          _this.getCommentList()
          _this.convert()
          _this.$forceUpdate();
        })
      },

      getUser() {
        this.myName = this.user.NAME;
        this.myHeader = this.NGINX_SERVER + this.user.AVATAR;
        this.myId = this.user.USER_ID;
        this.$forceUpdate();
      }

    },
    directives: { clickoutside },
    //生命周期相关函数
    created() {
      getUnreadCount(data => {
        app.unreadCount = data;
      });
      this.getForum();
      this.getCommentList();
      var user = JSON.parse(sessionStorage.getItem("userInfo"))
      if(user!=null){
        this.user = user
      }
      if(this.user!=null&&this.user!=undefined){
        this.getUser();
      }
    }
  })

  //注意：选项卡 依赖 element 模块，否则无法进行功能性操作
  layui.use('element', function () {
    var element = layui.element;

    //…
  });
</script>

</html>